<template>
  <div class="task_detail_page">
    <div style="margin-bottom: 26px;">
      <a-button @click="goBack()">返回</a-button>
    </div>
    <div class="task_detail_box">
      <div style="margin-right: 80px;">
        <a-card hoverable style="width: 240px" @click="showBigImg">
            <img
            alt="example"
            :src="taskItem.img1_url || defaultImg"
            slot="cover"
            />
        </a-card>
      </div>
      <div>
        <detail-list :col="3">
            <detail-list-item term="用户昵称">{{taskItem.nickname}}</detail-list-item>
            <detail-list-item term="用户账号">{{taskItem.phone}}</detail-list-item>
            <detail-list-item term="任务名称">{{taskItem.task_name}}</detail-list-item>
            <detail-list-item term="任务要求">{{taskItem.task_type}}</detail-list-item>
            <detail-list-item term="任务ID">{{taskItem.lid}}</detail-list-item>
            <detail-list-item term="领取ID">{{taskItem.id}}</detail-list-item>
            <detail-list-item term="任务奖励积分">{{taskItem.task_integral}}</detail-list-item>
            <detail-list-item term="任务进度">{{taskItem.task_num}}/{{taskItem.task_progress}}</detail-list-item>
            <detail-list-item term="任务领取前数量">{{taskItem.task_check_num}}</detail-list-item>
            <detail-list-item term="任务领取后数量">{{taskItem.task_audit_num}}</detail-list-item>
            <detail-list-item v-if="taskItem.task_ok_time" term="任务提交时间">{{taskItem.task_ok_time}}</detail-list-item>
            <detail-list-item v-if="taskItem.task_audit_time" term="审核时间">{{taskItem.task_audit_time}}</detail-list-item>
            <detail-list-item term="任务领取时间">{{taskItem.task_get_time}}</detail-list-item>
            <!-- <detail-list-item term="用户抖音链接">{{taskItem.task_url}}</detail-list-item> -->
            <detail-list-item term="用户任务账号id">{{taskItem.task_url_id}}</detail-list-item>
        </detail-list>
        <div>
          用户任务账号链接: {{taskItem.task_url}}
        </div>
        <div style="margin-top: 30px;margin-bottom: 30px;" class="b_text">审核理由: {{taskItem.task_audit_note}}</div>
        <div class="text" style="margin-bottom: 30px;">审核状态: <span :class="{ redColor: taskItem.status=='任务失败', blueColor: taskItem.status=='审核中',greenColor: taskItem.status=='任务通过' }">{{taskItem.status}}</span> </div>
      </div>
    </div>
    
    <a-modal class="img_modal" v-model="modalImg" :footer="null" :closable="false" :zIndex="1001" :width="480">
      <a-card hoverable style="width: 480px">
          <img
            alt="example"
            :src="taskItem.img1_url || defaultImg"
            slot="cover"
          />
        </a-card>
    </a-modal>
  </div>
</template>

<script>
import moment from 'moment'
import { taskRelease } from '@/api/getData'
import DetailList from '@/components/tools/DetailList'
const DetailListItem = DetailList.Item
export default {
  name: 'TaskDetail',
  components: {
    DetailList,
    DetailListItem
  },
  data () {
    return {
      description: '',
      value: 1,
      modalImg: false,
      taskItem: {},
      defaultImg: require('../../assets/task_detail_default.png')
    }
  },
  created(){
    let value = sessionStorage.getItem("taskItem"); 
    // let str = JSON.parse(value)
    this.taskItem = JSON.parse(value)
  },
  methods: {
    goBack(){
        this.$router.back()
    },  
    onTypeChange(){

    },  
    // handler
    handleSubmit (e) {
        let that = this;
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          // eslint-disable-next-line no-console
        //   console.log('Received values of form: ', values)
         this.$confirm({
            title: '确认新增任务?',
            content: '',
            onOk() {
                let parame = {},task_type = '';
                parame.video_url = values.video_url
                parame.home_url = values.home_url
                parame.task_note = values.task_note
                parame.task_progress = values.task_progress
                parame.task_integral = values.task_integral
                parame.release_name = values.release_name
                values.task_type.map(item=>{
                    task_type += item + ','
                })
                parame.task_type = task_type.slice(0,-1)
                parame.delivery_time = moment(values.delivery_time).format("YYYY-MM-DD hh:mm:ss");  

                taskRelease(parame).then(res=>{
                    console.log(res)
                    if(res.code == 200){
                       that.$message.info('新增成功');
                    }
                })
            },
            onCancel() {}
        });
          
        }
      })
    },
    showBigImg(){
      this.modalImg = true
    },
  }
}
</script>

<style scoped>

.task_detail_page{
    background: rgba(255, 255, 255, 1);
    padding: 20px;
    
}
.text{
  font-size: 32px;
}
.b_text{
  font-size: 22px;
}
.task_detail_box{
  display: flex;
}

</style>
